<template>
  <div class="loginRegister">
    <h2>免费注册会员</h2>
    <hr class="hr">
    <el-form action="#" class="registerForm" :model="registerForm" :rules="rules" ref="registerForm">
      <dl class="lg-dl">
        <dd>
          <el-form-item label="邮箱" prop="email">
            <el-input type="email" placeholder="请输入邮箱" v-model="registerForm.email" autocomplete="off"></el-input>
          </el-form-item>
        </dd>
      </dl>
      <dl class="lg-dl">
        <dd>
          <el-form-item label="用户名" prop="username">
            <el-input type="text" placeholder="请输入用户名" v-model="registerForm.username" autocomplete="off"></el-input>
          </el-form-item>
        </dd>
      </dl>
      <dl class="lg-dl">
        <dd>
          <el-form-item label="昵称" prop="nickName">
            <el-input type="text" placeholder="请输入昵称" v-model="registerForm.nickName" autocomplete="off"></el-input>
          </el-form-item>
        </dd>
      </dl>
      <dl class="lg-dl">
        <dd>
          <el-form-item label="密码" prop="password">
            <el-input type="password" placeholder="请输入密码" v-model="registerForm.password" autocomplete="off"></el-input>
          </el-form-item>
        </dd>
      </dl>
      <dl class="lg-dl">
        <dd>
          <el-form-item label="再次输入密码" prop="rePassword">
            <el-input type="password" placeholder="请再次输入密码" v-model="registerForm.rePassword" autocomplete="off"></el-input>
          </el-form-item>
        </dd>
      </dl>
      <dl class="lg-dl">
        <dd>
          <el-form-item label="手机号码" prop="tel">
            <el-input type="text" placeholder="请输入手机号码" v-model="registerForm.tel" autocomplete="off"></el-input>
          </el-form-item>
        </dd>
      </dl>
      <dl class="lg-dl">
        <dd>
          <el-form-item label="验证码" prop="code" style="height: 3em;">
            <el-input type="text" v-model="registerForm.code" auto-complete="off" placeholder="验证码"></el-input>
            <el-button type="primary" style="position: relative;left: 15em;top: -2.9em" @click.stop="getCode" :disabled="btnStatus">获取验证码</el-button>
          </el-form-item>
        </dd>
      </dl>
      <dl class="lg-dl" style="    margin-top: 3em;">
        <dd>
          <input name="agreement" type="checkbox"  checked id="remember">
          我已看过并接受《<a href="" style="color:#b50029" target="_blank">用户协议</a>》</dd>
      </dl>
      <dl class="lg-dl">
        <input name="act" type="hidden" value="act_register">
        <input type="hidden" name="back_act" value="">
        <dd><input name="Submit" class="login-btn" type="submit" value="立即注册" @click.prevent.stop="registerHandle()"></dd>
      </dl>
      <dl class="lg-dl" >
        <dd>
          <div class="lg-link">
            点击“立即注册”，即表示您同意并愿意遵守咚咚出版社 <i style="color:#585858;">用户协议</i>和<i style="color:#585858;">隐私政策</i>
          </div>
        </dd>
      </dl>
    </el-form>
  </div>
</template>

<script>


export default {
  name: "Register",
  data(){
    var validateEmail = (rule, value, callback) => {
      const regEmail = /^\w+@\w+(\.\w+)+$/
      if (regEmail.test(value)) {
        // 合法邮箱
        return callback()
      }
      callback(new Error('请输入合法邮箱'))
    };
    var validateNickName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入昵称'))
      } else {
        const reg = /[^]*/
        if (value.length < 100 && reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入字符在15以内的昵称'))
        }
      }

    };
    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    };
    var validateRepassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }

    };
    var validateTel = (rule, value, callback) => {
      const regMobile = /^1[34578]\d{9}$/
      if (regMobile.test(value)) {
        return callback()
      }
      // 返回一个错误提示
      callback(new Error('请输入合法的手机号码'))
    };
    var validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入英文或数字'))
      } else {
        const reg = /^[0-9a-zA-Z]+$/ // 验证没有空格的英文名
        // const reg = /^[a-zA-Z][A-Za-z\s]*[a-zA-Z]*$/ 验证有空格的英文名
        if (value.length < 100 && reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的英文或数字'))
        }
      }

    };
    var validateCode = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入4位的验证码'))
      } else {
        const reg = /^[0-9]*$/ // 验证没有空格的英文名
        // const reg = /^[a-zA-Z][A-Za-z\s]*[a-zA-Z]*$/ 验证有空格的英文名
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的验证码'))
        }
      }

    };
    return{
      btnStatus:false,
      registerForm:{
        email: '',
        nickName:'',
        password: '',
        rePassword:'',
        tel: null,
        username:'',
        code:'',
      },
      rules: {
        email: [
          { validator: validateEmail, trigger: 'blur' }
        ],
        nickName: [
          { validator: validateNickName, trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { validator: validatePassword, trigger: 'blur' }
        ],
        rePassword: [
          { validator: validateRepassword, trigger: 'blur' }
        ],
        tel: [
          { validator: validateTel, trigger: 'blur' },
        ],
        username: [
          { validator: validateUsername, trigger: 'blur' },
        ],
        code: [
          { validator: validateCode, trigger: 'blur' },
        ],
      }
    }
  },
  methods:{
    btnStatusChange(){
      this.btnStatus = false
    },
    getCode(){
      this.$refs.registerForm.validateField('tel',(telError)=>{
        if(telError){
          this.$message.error('请输入手机号')
        }else{
          this.getRequest('/cms/user/getYzm/'+this.registerForm.tel).then((resp)=>{
            console.log(resp)
            if(resp.status == 200){
              this.btnStatus = true
              setInterval(this.btnStatusChange,60000)
              this.$message.success('验证码发送成功。')
            }else{
              this.$message.error('验证码发送失败。')
            }
          })
        }
      })




    },
    registerHandle(){
          this.$refs.registerForm.validate(valid=>{
            if(valid){
              //核对注册发送的验证码
              this.getRequest(`/cms/user/getYzm/${this.registerForm.tel}/${this.registerForm.code}`).then((resp)=>{
                console.log(resp)
                if(resp.status == 200){
                  // 注册
                  this.postRequest('/cms/user/register',this.registerForm).then(resp=>{
                    if(resp.status===200){
                      this.$alert('注册成功。', '注册', {
                        confirmButtonText: '确定',
                        callback: () => {
                          // 跳转首页
                          this.$router.replace('/login')
                        }
                      });

                    }else{
                      this.$message.error(resp.message);
                      // 跳转首页
                      this.$router.replace('/Register')
                    }
                  })
                }else{
                  this.$message.error('验证码不正确。')
                }
              })
            }else{
              console.log('参数验证不合法！');
              return false
            }
          })

    }
  }
}
</script>

<style scoped>
.loginRegister{
  width: 557px;
  margin: 103px auto 116px auto;
  border: 1px solid #b7b7b7;
  background: #FFF;
  overflow: hidden;
  padding: 28px;
}
.loginRegister h2{
  text-align: center;
  margin-top: 1em;
}
.loginRegister hr{
  width: 80%;
  color: lightgray;
  margin: 1em auto;
}
.el-form-item {
  margin-bottom: 0px
;
}
.registerForm .lg-dl{
  width: 316px;
  margin: 16px auto;
}


/*搜索框样式*/
.registerForm .lg-dl dd el-input{
  width: 294px;
  height: 20px;
  padding: 10px;
  border: 1px solid #dcdcdc;
  color: #8d8d8d;
}
#remember{
  width: 1em;
}
.registerForm .lg-dl .login-btn{
  width: 316px;
  height: 46px;
  background: #b50029;
  color: #FFF;
  border: none;
  font-size: 18px;
  font-family: "微软雅黑";
  cursor: pointer;
  margin-top: 31px;
}
.lg-dl .lg-link a {
  margin: 0 5px;
}
</style>